<template>
	<view class="page-my" :key="refreshKey">
		<uv-modal ref="realNameAuthenticationModal" title="提示" confirmText="立即认证" @confirm="realNameAuthenticationPage">
			<view class="slot-content">
				请先进行实名认证
			</view>
		</uv-modal>
		<view class="setting" @click="gotoPage('../setting/setting')">
			<image src="../../static/img/my/shezhi.png" mode="aspectFit"></image>
		</view>
		<view class="my-header">
			<view class="header-l">
				<view class="my-user" style="animation-duration: 2s;">
					<image :src="formatAvatar()" mode=""></image>
				</view>
				<view class="header-cont" style="animation-duration: 2s;">
					<view class="uuid">
						ID:{{ accountInfo.inviteCode }}
					</view>
					<view class="level-img">
						等级{{ accountInfo.memberLevelNum }}
					</view>
				</view>
			</view>
			<div class="yeb">
				余额宝
			</div>
			<!-- <view class="header-r">
				 <view @click="gotoPage('../recharge/recharge')" class="animate__bounceInLeft" style="animation-duration: 2s;">充值</view>
				 <view @click="gotoPage('../withdraw/withdraw')" class="animate__bounceInRight" style="animation-duration: 2s;">提现</view>
			</view> -->
		</view>
		<view class="num-info" style="animation-duration:1s;">
			<view class="num-div">
				<view class="num-1">{{ totalAsset }}</view>
				<view class="num-2">总资产</view>
			</view>
			<view class="num-div">
				<view class="num-1">{{ holdingProjectAsset }}</view>
				<view class="num-2">待收本金</view>
			</view>
			<view class="num-div">
				<view class="num-1">{{ nextTimeIncome }}</view>
				<view class="num-2">待收利息</view>
			</view>
			<view class="num-div">
				<view class="num-1">{{ accountInfo.point }}</view>
				<view class="num-2">账号积分</view>
			</view>
		</view>
		<view class="bj-cut">
		<view class="hj-1" style="animation-duration:1s;">
             <view class="hj-1-1">
				<view class="hj-l" @click="gotoPage('../memberLevel/memberLevel')">
                     <div class="hj-l-1">会员权益</div>
					 <div class="hj-l-2">享受更多权益</div>
				</view>
				<div class="hj-r">
					<image src="../../static/img/my/h1.png"></image>
				</div>
			 </view>
		</view>
		<div class="hj-2">
			<div class="hj-2-three" @click="gotoPage('../recharge/recharge')">
				<image src="../../static/img/my/three1.png"></image>
			</div>
			<div class="hj-2-three" @click="gotoPage('../withdraw/withdraw')">
				<image src="../../static/img/my/three2.png"></image>
			</div>
			<div class="hj-2-three" @click="gotoPage('../invite/invite')">
				<image src="../../static/img/my/three3.png"></image>
			</div>
		</div>
		<view class="tab-card" style="animation-duration: 1s;">
			<view class="h1">
				资产中心
			</view>
			<uv-grid :col="5" class="tab-list">
				<uv-grid-item class="grid-item" @click="gotoPage('../balanceChangeLog/balanceChangeLog')">
					<view class="grid-icon">
						<image src="/static/img/my/zijin.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">资金流水</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../rechargeRecord/rechargeRecord')">
					<view class="grid-icon">
						<image src="/static/img/my/chongzhi.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">充值记录</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../withdrawRecord/withdrawRecord')">
					<view class="grid-icon">
						<image src="/static/img/my/tixian.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">提现记录</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../incomeRecord/incomeRecord')">
					<view class="grid-icon">
						<image src="/static/img/my/shouyi.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">收益记录</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../holdingProject/holdingProject')">
					<view class="grid-icon">
						<image src="/static/img/my/goumai.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">购买记录</text>
				</uv-grid-item>
				<!-- <uv-grid-item class="grid-item" @click="gotoPage('../holdingProject/holdingProject')">
					<view class="grid-icon">
						<image src="/static/img/touzijilu.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">投资记录</text>
				</uv-grid-item> -->
			</uv-grid>
		</view>
		<view class="tab-card" style="animation-duration: 1s;">
			<view class="h1">
				个人中心
			</view>
			<uv-grid :col="5" class="tab-list">
				<uv-grid-item class="grid-item" @click="gotoPage('../myWallet/myWallet')">
					<view class="grid-icon">
						<image src="/static/img/my/qianbao.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">我的钱包</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../signIn/signIn')">
					<view class="grid-icon">
						<image src="/static/img/my/qiandao.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">每日签到</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../bindWalletAddress/bindWalletAddress')">
					<view class="grid-icon">
						<image src="/static/img/my/qianbao.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">钱包地址</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="realNameAuthenticationPage">
					<view class="grid-icon">
						<image src="/static/img/my/dizhi.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">实名认证</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../useExplain/useExplain')">
					<view class="grid-icon">
						<image src="/static/img/my/jiaocheng.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">新手教程</text>
				</uv-grid-item>
				<!-- <uv-grid-item class="grid-item" @click="gotoPage('../holdingProject/holdingProject')">
					<view class="grid-icon">
						<image src="/static/img/touzijilu.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">投资记录</text>
				</uv-grid-item> -->
			</uv-grid>
		</view>
		<view class="tab-card" style="animation-duration: 1s;">
			<uv-grid :col="5" class="tab-list">
				<uv-grid-item class="grid-item" @click="gotoPage('../msg/msg')">
					<view class="grid-icon">
						<image src="/static/img/my/xitong.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">系统消息</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../setting/setting')">
					<view class="grid-icon">
						<image src="/static/img/my/gengduo.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">更多设置</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="logout">
					<view class="grid-icon">
						<image src="/static/img/my/tuichu.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">安全退出</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<!-- <view class="tab-card">
			<view class="h1">
				常用功能
			</view>
			<uv-grid :col="4" class="tab-list common-list">
				<uv-grid-item class="grid-item" @click="gotoPage('../incomeRecord/incomeRecord')">
					<view class="grid-icon">
						<image src="/static/img/chongzhima.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">收益记录</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="realNameAuthenticationPage">
					<view class="grid-icon">
						<image src="/static/img/shimingrenzheng-3.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">实名认证</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../myTeam/myTeam')">
					<view class="grid-icon">
						<image src="/static/img/wodetuandui-2.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">我的团队</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../teamReward/teamReward')">
					<view class="grid-icon">
						<image src="/static/img/qianbao-8.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">团队奖励</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../invite/invite')">
					<view class="grid-icon">
						<image src="/static/img/yaoqinghaoyou.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">邀请好友</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="signIn">
					<view class="grid-icon">
						<image src="/static/img/qiandao-3.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">每日签到</text>
				</uv-grid-item>
				<uv-grid-item class="grid-item" @click="gotoPage('../coupon/coupon')">
					<view class="grid-icon">
						<image src="/static/img/youhuiquan-5.png" mode="aspectFit"></image>
					</view>
					<text class="grid-text">优惠券</text>
				</uv-grid-item>
			</uv-grid>
		</view> -->
	    </view>
	</view>
</template>

<script>
	import common from '@/common/common'
	import config from '@/common/config'
	export default {
		data() {
			return {
				gridItemIconSize: '32',
				appInfo: '',
				customerServiceUrl: '',
				accountInfo: '',
				holdingProjectAsset: '',
				accountVisibleFlag: true,
				fundVisibleFlag: true,
				nextTimeIncome: '',
				upgradeProgress: 0,
				unreadCount: '',
				showAmount: true,
				refreshKey:0
			}
		},
		computed: {
			totalAsset: function() {
				var totalAsset = 0;
				if (this.accountInfo === null || this.accountInfo === '') {
					return '';
				}
				return common.moneyFormat(this.accountInfo.balance);
			}
		},
		onLoad() {},
		onShow() {
			this.getUpgradeProgress();
			this.getNextTimeIncome();
			this.getMemberInfo();
			this.getHoldingProjectAsset();
			this.countUnread();
			this.refreshKey += 1;
		},
		methods: {
			logout() {
				var that = this;
				uni.$uv.http.post('/logout').then(res => {
					try {
						uni.removeStorageSync('tokenName');
					} catch (e) {}
					uni.reLaunch({
						url: "../login/login"
					});
				});
			},
			countUnread() {
				var that = this;
				uni.$uv.http.get('/personalMsg/countUnread').then(res => {
					that.unreadCount = res.data;
				});
			},

			getUpgradeProgress() {
				var that = this;
				uni.$uv.http.get('/memberRecharge/getUpgradeProgress').then(res => {
					that.upgradeProgress = res.data;
				});
			},

			chooseAvatar() {
				var that = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						var header = {};
						var tokenName = uni.getStorageSync('tokenName');
						var tokenValue = uni.getStorageSync('tokenValue');
						header[tokenName] = tokenValue;
						uni.uploadFile({
							url: config.storageUploadUrl,
							filePath: res.tempFilePaths[0],
							header: header,
							name: 'file_data',
							formData: {},
							success: (uploadFileRes) => {
								that.updateAvatar(JSON.parse(uploadFileRes.data).data[0]);
							}
						});
					}
				});
			},

			updateAvatar: function(avatar) {
				var that = this;
				uni.$uv.http.post('/member/updateAvatar', {
					avatar: avatar,
				}).then(res => {
					that.getMemberInfo();
				});
			},

			formatAvatar() {
				return this.accountInfo.avatar ? this.accountInfo.avatar :
					'/static/img/user-img2.png';
			},

			getNextTimeIncome() {
				var that = this;
				uni.$uv.http.get('/buyInRecord/getNextTimeIncome').then(res => {
					that.nextTimeIncome = res.data;
				});
			},

			formatMemberLevel() {
				if (this.accountInfo) {
					return 'VIP ' + this.accountInfo.memberLevelNum;
				}
				return '';
			},

			getHoldingProjectAsset() {
				var that = this;
				uni.$uv.http.get('/buyInRecord/getHoldingProjectAsset').then(res => {
					that.holdingProjectAsset = res.data;
				});
			},

			contactCustomerService() {
				if (this.customerServiceUrl) {
					uni.navigateTo({
						url: '../customerService/customerService?customerServiceUrl=' + this.customerServiceUrl
					});
				} else {
					uni.showToast({
						title: "客服系统繁忙",
						icon: "none"
					});
					return;
				}
			},

			getCustomerServiceUrl() {
				var that = this;
				uni.$uv.http.get('/setting/getCustomerServiceUrl').then(res => {
					that.customerServiceUrl = res.data;
				});
			},

			signIn() {
				var that = this;
				uni.$uv.http.post('/member/signIn', {}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '签到成功',
						duration: 2000,
						complete: function() {
							that.getMemberInfo();
						}
					});
				});
			},

			getAppInfo() {
				var that = this;
				uni.$uv.http.get('/setting/getAppInfo').then(res => {
					that.appInfo = res.data;
				});
			},

			checkAuthenticationGotoPage(path) {
				if (this.accountInfo.authenticationState == '1') {
					this.$refs.realNameAuthenticationModal.open();
					return;
				}
				if (this.accountInfo.authenticationState == '2') {
					uni.showToast({
						title: "实名审核后才可以操作",
						icon: "none"
					});
					return;
				}
				this.gotoPage(path);
			},

			realNameAuthenticationPage() {
				this.gotoPage('../realNameAuthentication/realNameAuthentication');
			},

			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					that.accountInfo = res.data;
				});
			},

			gotoPage(path) {
				uni.navigateTo({
					url: path
				});
			}
		}
	}
</script>

<style scoped lang="less">

	image {
		display: block;
		width: 100%;
		height: 100%;
	}

	page {
		height: auto !important;
		background: url('/static/img/my_bg.png') no-repeat;
		background-size: 100% 600rpx;
	}

	.page-my {
		padding: 0px 40rpx;
		box-sizing: border-box;
		padding-bottom: 64rpx;
	}

	.my-header {
		padding: 35rpx 0px;
		height: 156rpx;
		display: flex;
		align-items: center;
		justify-content:flex-start;
		padding-top: 24rpx;

		.yeb{
			width: 150rpx;
			height: 50rpx;
			background: url(/static/img/my/yeb.png) no-repeat;
			background-size:150rpx 50rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 50rpx;
			color: #FFF;
			margin-left: auto;
			margin-right: -40rpx;
			margin-top: 20rpx;
		}


		.header-l {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.my-user {
			width: 116rpx;
			height: 116rpx;
			flex-grow: 0;
			margin-right: 25rpx;
		}

		.header-cont {
			flex-grow: 1;
			color: #FFF;

			.level-img {
				width: 152rpx;
				height: 44rpx;
				background-image: url('../../static/img/mj/level.png');
				background-size: 100% 100%;
				background-position: center;
				font-family: SF Pro Text, SF Pro Text;
				font-size: 24rpx;
				color: #5E512D;
				line-height: 24rpx;
				letter-spacing: 1px;
				text-align: right;
				font-style: normal;
				text-transform: none;
				padding-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;
				margin-top: 10rpx;
			}

			.uuid {
				font-size: 36rpx;
				font-weight: bold;
			}

			.progress {
				width: 315rpx;
			}
		}

		.header-r {
			 margin-top: 10rpx;
			 margin-left: 80rpx;
			 display: flex;
			 width: 210rpx;
			 justify-content: space-between;
			 view{
				background-color: #FDDD8B;
				font-size: 26rpx;
				height: 40rpx;
				line-height: 40rpx;
				padding-left:20rpx;
				padding-right:20rpx;
				border-radius: 40rpx;
				letter-spacing: 4rpx;
				text-shadow: 3rpx 3rpx 5rpx rgba(0, 0, 0, 0.1);
			 }
		}

	}
    
	.setting {
		margin-top: 32rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 40rpx;
		}
	}
    .num-info{
		display: flex;
		.num-div{
			width: 33%;
			text-align: center;
			margin-top: 20rpx;
			.num-1{
				font-size: 32rpx;
				font-weight: 550;
				color:#FFF;
			}
			.num-2{
				font-size: 26rpx;
				color: #FFF;
				margin-top: 10rpx;
			}
		}
	}
	.hj-1{
		display:flex;
		justify-content: space-between;
		margin-top: -70rpx;
		.hj-1-1{
			background-color: #FFF;
			width: 100%;
			border-radius: 20rpx;
			height: 160rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: url(/static/img/my/hyqy.png);
			background-size: 100%;
			.hj-l{
				width: 100%;
				padding-left: 60rpx;
				.hj-l-1{
					font-size: 30rpx;
					font-weight: 550;
					letter-spacing:4rpx;
				}
				.hj-l-2{
					font-size: 24rpx;
					color: #474B51;
					margin-top: 10rpx;
				}
			}
		}
	}
	.hj-2{
		margin-top: 30rpx;
		display: flex;
		justify-content:space-between;
		.hj-2-three{
			width: 300rpx;
			height: 220rpx;
		}
	}
	.bj-cut{
		margin-top: 100rpx;
		margin-left: -40rpx;
		margin-right: -40rpx;
		padding-top: 5rpx;
		padding-left: 30rpx;
		padding-right:30rpx;
		background: linear-gradient(to bottom, #E3ECF8 0%, #F4F6F6 33%, #F3F4F1 66%, #FFFFFF 100%);
		height: 100%;
	}
	.aqtc{
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #EE5D29;
		font-weight: 550;
	}
	.card {
		height: 368rpx;
		border-radius: 35rpx;
		background: linear-gradient(180deg, #F1EDDE 0%, #FFFFFF 20%);
		padding: 32rpx;
		color: #fff;
		position: relative;
		color: #7B724C;

		.card-h1 {
			color: #C5C3BA;
			font-size: 24rpx;
			font-weight: 400;
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}
		}

		.card-balance {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			width: 100%;
			position: relative;
			z-index: 2;

			.balance {
				font-size: 54rpx;
				font-weight: bold;
			}

			.my-wallet {
				display: flex;
				align-items: center;
			}

			.icon-arrow {
				padding-left: 12rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}

		.card-bottom {
			margin-top: 54rpx;
			display: flex;

			.card-item {
				display: flex;
				align-items: center;

				.money-title {
					font-size: 24rpx;
					color: #C5C3BA;
					margin-right: 6rpx;
				}

				.money {
					font-size: 28rpx;
					color: #7B724C;
				}
			}
		}

		.card-footer {
			background: rgba(11, 19, 39, 0.05);
			border-radius: 12rpx;
			height: 116rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			box-sizing: border-box;
			justify-content: flex-start;

			.footer-item {
				display: flex;
				flex-direction: column;
				width: 25%;
				align-items: center;

				.footer-title {
					font-size: 20rpx;
					line-height: 20rpx;
					color: rgba(11, 19, 39, 0.4);
				}

				.footer-number {
					font-size: 32rpx;
					line-height: 32rpx;
					color: #0B1327;
					margin-top: 20rpx;
				}

			}
		}

		.zichan {
			width: 193rpx;
			height: 193rpx;
			position: absolute;
			top: -36rpx;
			right: -20rpx;
			opacity: 0.3;
			z-index: 1;
		}
	}

	.grade-card {
		height: 161rpx;
		align-items: center;
		border-bottom: 1px solid #ebebef;

		.grid-item {
			height: 100%;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				right: 0px;
				height: 44rpx;
				width: 2rpx;
				background: #ebebef;
			}

			&:nth-last-child(1) {
				&:after {
					width: 0rpx;
				}
			}

			.grade-number {
				color: #7dc4e6;
				margin-bottom: 25rpx;
			}

			.grade-title {
				color: #333;
				font-size: 26rpx;

			}
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 20rpx;
		box-sizing: border-box;

		.btn {
			width: 302rpx;
			text-align: center;
			height: 74rpx;
			border-radius: 10rpx;
			background: rgba(123, 192, 230, 1);
			color: #fff;
			line-height: 74rpx;
			font-weight: bold;
		}
	}

	.tab-card {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		margin-top: 40rpx;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.03);
		.h1 {
			padding: 0rpx 22rpx 22rpx;
			box-sizing: border-box;
			font-size: 29rpx;
			font-weight:550;
		}

		.tab-list {
			background: #FFF;
			border-radius: 10px 10px 10px 10px;
			padding:30rpx;

			.grid-icon {
				width: 55rpx;
				height: 55rpx;

				image {
					height: 100%;
				}
			}

			.grid-text {
				font-size: 26rpx;
				color: #24282D;
				margin-top: 20rpx;
			}
		}

		.common-list {
			margin-top: 15rpx;

			.grid-item {
				margin-top: 50rpx;
			}
		}
	}

	.my-nav-list {
		margin-top: 30rpx;
		background: #18273D;
		border-radius: 14px 14px 14px 14px;
		padding: 0 40rpx;


		.nav-item {
			padding: 50rpx 0px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: center;

			.nav-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

			.nav-title {
				flex-grow: 1;
				font-size: 28rpx;
				display: flex;
				color: #FFFFFF;

				.unread-count {
					padding-left: 16rpx;
				}

			}
		}
	}
</style>